<template>
  <div id="main">
    <el-card class="add-box-card" :body-style="{height:'calc(100% - 76px)',overflow:'auto'}">
      <div slot="header" class="box-card-title">
        <span>添加巡检任务</span>
      </div>

      <el-form :model="addRouteFormData" class="edit-form" label-width="100px" label-position="left"   :rules="rules" ref="ruleForm"  >
        <el-form-item label="线路名称："  prop="routeName" >
          <el-input class="add-input" v-model="addRouteFormData.routeName" placeholder="请输入线路名称"></el-input>
        </el-form-item>
        <div v-for="(route,index) in addRouteFormData.routes" :key="route.index">
          <el-form-item :label="`${route.index}号巡检点：`">
            <!-- <el-input
              class="add-input"
              v-model="addRouteFormData.routes[index].pointName"
              placeholder="输入巡检点名称"
            ></el-input> -->
            <el-select v-model="addRouteFormData.routes[index].pointName" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.f_name"
                :value="item.id">
              </el-option>
            </el-select>
            <div v-if="index === 0" class="add-green-text" >
              <img src="../../../../static/add.jpg" @click="addPatrolPoint" alt />
              <img src="../../../../static/cutdown.jpg" @click="reducePatrolPoint" alt />
              <span>添加删除巡检点</span>
            </div>
          </el-form-item>
          <el-form-item label label-width="80px">
            <el-form-item
              v-for="(signPoint,signIndex) in addRouteFormData.routes[index].signPoints"
              :key="signPoint.index"
              label="签到点："
            >
              <el-input
                class="add-sign-input"
                v-model="addRouteFormData.routes[index].signPoints[signIndex].name"
              ></el-input>
              <div
                class="add-green-text"
                v-if="signIndex === 0"
              >
              <img src="../../../../static/add.jpg" @click="addSignPoint(index,signIndex)" alt />
              <img src="../../../../static/cutdown.jpg" @click="reduceSignPoint(index,signIndex)" alt />
              <span>添加删除签到点</span>
              </div>
            </el-form-item>
          </el-form-item>
        </div>
        <el-form-item label="签到时间：">
          <el-time-picker
            class="add-input"
            is-range
            v-model="addRouteFormData.timeRange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="footer">
      <el-button @click="submit" class="greenButton" type="primary">提交</el-button>
    </div>
  </div>
</template>

<script>
import DayJs from 'dayjs';
export default {
  data: function() {
    return {
      options:[],
      addRouteFormData: {
        routeName: "",
        routes: [
          {
            index: 1,
            pointName: "",
            signPoints: [
              {
                index: 1,
                name: ""
              }
            ],
          }
        ],
        tips: "",
        timeRange: []
      },
      rules:{
        routeName:[{ required: true, message: '请输入线路名称', trigger: 'change'}]
      },
      personList: ["张三", "李四", "王五"],
      routeList: [
        {
          value: "1",
          label: "一号线"
        },
        {
          value: "2",
          label: "二号线"
        },
        {
          value: "3",
          label: "三号线"
        },
        {
          value: "4",
          label: "四号线"
        }
      ]
    };
  },
  created(){
    this.initData();
    this.huoqu();
  },
  methods: {
    huoqu(){
      this.ajaxCommon.ajax({
          url: 'loulist',
          success: (res)=>{
            console.log(res)
            if(res.code == 200){
              this.options = res.data;
            }
          }
      })

    },
    initData(){
      var data = {
        routeName: "",
        routes: [
          {
            index: 1,
            pointName: "",
            signPoints: [
              {
                index: 1,
                name: ""
              }
            ],
          }
        ],
        tips: "",
        timeRange: [new Date(), new Date()]
      };
      this.addRouteFormData = data;
    },
    addPatrolPoint() {
      this.addRouteFormData.routes.push({
        index: this.addRouteFormData.routes.length + 1,
        pointName: "",
        signPoints: [
          {
            index: 1,
            name: ""
          }
        ],
        timeRange: []
      });
    },

    reducePatrolPoint() {
      if(this.addRouteFormData.routes.length > 1) this.addRouteFormData.routes.pop()
    },

    addSignPoint(index, signIndex) {
      this.addRouteFormData.routes[index].signPoints.push({
        index: this.addRouteFormData.routes[index].signPoints.length + 1,
        name: ""
      });
    },
    //处理编辑的数据
    dealEditData: function (data) {
      console.log('nnnnnnnnn',data.timeRange);
      console.log(JSON.stringify(data));
      var param = {
        route_name: data.routeName,
        route_point: [],
        signed_point: [],
        route_time: ''
      };
      var routs = [];
      var signs = [];
      for(var i=0;i<data.routes.length;i++){
        var tRout = data.routes[i];
        routs.push(tRout.pointName);
        var arrayS = [];
        for(var j=0;j<tRout.signPoints.length;j++){
          var tSign = tRout.signPoints[j];
          arrayS.push(tSign.name);
        }
        signs.push(arrayS);
      }
      var dates = [];
      
      data.timeRange.forEach(item=>{
        dates.push(DayJs(item).format('HH:mm:ss'));
      });
      param.route_time = dates.join('~');
      param.route_point = routs;
      param.signed_point = signs;

      console.log(param)
      return param;
    },
    submit() {
      console.log('aaaaaaaaaaaaaaaaaaaaaaaaa',this.addRouteFormData.timeRange)
      var param = this.dealEditData(this.addRouteFormData);
      console.log(param)
      this.ajaxCommon.ajax({
        url: 'traceAdd',
        method: 'post',
        data: param,
        success: (res)=>{
          console.log(res);
          if(res.code==200){
            this.ajaxCommon.notice('添加成功');
            this.reset('ruleForm');
          } else {
            this.ajaxCommon.notice(res.status,2);
          }
        }
      })
    },
    reset(formName) {
        this.$refs[formName].resetFields();
        var data = {
        routes: [
          {
            index: 1,
            pointName: "",
            signPoints: [
              {
                index: 1,
                name: ""
              }
            ],
          }
        ],
        tips: "",
        timeRange: [new Date(), new Date()]
      };
      this.addRouteFormData = data;
      },
    reduceSignPoint(index,signIndex) {
      if(this.addRouteFormData.routes[index].signPoints.length > 1) this.addRouteFormData.routes[index].signPoints.pop()
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  .add-box-card {
    border: 1px solid #00bdac;
    box-shadow: 0px 4px 16px 0px rgba(0, 201, 212, 0.14);
    height: 480px;
    .box-card-title {
      background-color: #00bdac;
      height: 36px;
      line-height: 36px;
      padding-left: 30px;
      font-size: 14px;
      color: #ffffff;
    }

    .edit-form {
      .add-green-text {
        display: inline-flex;
        color: #00bdac;
        width: 160px;
        justify-content: space-between;
        align-items: center;
        vertical-align: bottom;
        margin-left: 14px;

        img {
          cursor: pointer;
          width: 22px;
          height: 22px;
        }
      }
    }
  }

  .add-input {
    width: 260px;
  }

  .add-sign-input {
    width: 180px;
  }

  .footer {
    width: 100%;
    text-align: right;
    margin-top: 20px;
  }
}
</style>

<style lang="less">
.add-box-card {
  .el-card__header {
    padding: 0;
  }
}
</style>
